<template>
	<div class="order bg-f5">
		<van-tabs v-model='status'>
		  	<van-tab v-for="(title,index) in title_data" :key="index"> 
		  		<div slot="title" class='ellipsis' @click="loadInitData(title)">{{ title.name }}</div>
				<van-list
				  	v-model="loading"
				  	:finished="finished"
				  	@load="loadData"
				  	:offset='100'
				>
					<van-cell
					    v-for="(item,index) in data"
					    :key="index"
					    class="border-t20"
					>
						<div class="container bg-white">
							<div class="layout pt15 pb15">
			  					<h3 class="fs14 c333">订单号:{{ item.order_no }}</h3>
			  					<span class="fs14 subject" v-if=" status == 0 ">待付款</span>
			  					<span class="fs14 subject" v-if=" status == 1 ">待发货</span>
			  					<span class="fs14 subject" v-if=" status == 2 ">已发货</span>
			  					<span class="fs14 c333" v-if=" status == 3 ">已完成</span>
			  					<span class="fs14 c333" v-if=" status == 5 ">已取消</span>
			  				</div>
			  				<div class="pt20 pb20 border-t layout-juscon" v-for="(items,index) in item.order_item" :key='index' @click="jumpDetail(items)">
			  					<img class="mr15 responsive-img img-bg" :src="items.goods_picture" alt="" style="width:100px;height:85px;">
								<div class="flex_1">
									<p class="fs16 black ellipsis" style="width: 12rem">{{ items.goods_name }}</p>
									<p class="c999 fs12 layout">规格：{{ items.sku_name }} <span>数量:{{ items.num }}</span></p>
									<strong class="subject fs16"><i class="fs14">￥</i>{{ items.price }}</strong>
								</div>
			  				</div>
			  				<div class="layout pt10 pb10 border-t">
			  					<span class="fs14 c999">{{ item.created_at,'yyyy-MM-dd hh:mm:ss' | formatDate }}</span>
			  					<div>
				  					<template v-if="status == 0">
				  						<button class="border pt5 pb5 pl10 pr10 subject radius fs14 border-red">立即支付</button>
				  					</template>
				  					<template v-if="status == 1">
					  					<button class="border pt5 pb5 pl10 pr10 subject radius fs14 border-red" @click="loadOrderData(item)">項目进度</button>
				  					</template>
									<template v-if="status == 2">
										<router-link tag="button" :to="'/personal/order/express?order_id='+ item.order_id" class="border pt5 pb5 pl10 pr10 c666 radius fs14 border-c666">查看物流</router-link>
				  						<button class="border pt5 pb5 pl10 pr10 subject radius fs14 border-red" @click="recieveOrderFun(item)">确认收货</button>
									</template>
				  					
									<template v-if="status == 3">
										<button class="border pt5 pb5 pl10 pr10 c666 radius fs14 border-c666" v-if="item.is_aftersale == 1" @click="loadOrderData(item)">申请售后</button>
										<button class="border pt5 pb5 pl10 pr10 subject radius fs14 border-red"  v-if="item.is_aftersale == 0" @click="loadOrderData(item)">售后详情</button>
									</template>
			  					</div>
			  				</div>
						</div>
					</van-cell>
				</van-list>
		 	</van-tab>
		</van-tabs>
			
		<van-popup v-model="schedule_show" position="bottom">
			<h3 class="align-center container border-b pt10 pb10 pos-rel" v-if="shop_show">商品选择<img @click="schedule_show = false" class='pos-abs close' src="../../../assets/img-close.png" alt=""></h3>
			<h3 class="align-center container border-b pt10 pb10 pos-rel" v-else>进度详情<img @click="schedule_show = false" class='pos-abs close' src="../../../assets/img-close.png" alt=""></h3>
			<ul class="container pb10 shop-list" v-if="shop_show">
				<li class="pt10 pb10 layout border-b" v-for='item in order_data.order_item' @click="getSchedule(item)">
					<img class="img-bg responsive-img" style="width: 7rem;height: 7rem;" :src="item.goods_picture" alt="">
					<div class="flex_1 ml10">
						<p class="fs16 black ellipsis" style="width: 14rem">{{ item.goods_name }}</p>
						<p class="c999 fs12 layout pt10 pb10">规格：{{ item.sku_name }} <span>数量:{{ item.num }}</span></p>
						<strong class="subject fs16"><i class="fs14">￥</i>{{ item.price }}</strong>
					</div>
				</li>
			</ul>
		  	<ul class="container shop-list" v-else> 
				<li class="layout-juscon pt20 auto w92" v-for="items in schedule_data">
					<div class="li-left mr20">
						<p class="fs14 black">{{ items.date }}</p>
						<span class="fs12 c666">{{ items.time }}</span>
					</div>
					<div class="li-right flex_1 border-b pb20">
						<p class="fs14 c666"><i  style="color:#ff7b1a;">[{{ items.title }}]</i>{{ items.tag }}</p>
						<ul class="row">
							<li class="col s4 align-center pl10 pr10" v-for="item in items.pics">
								<img class="responsive-img" :src="item" alt="">
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</van-popup>
	</div>
</template>

<script>
import { formatDate } from "@/utils";
import { Tab, Tabs,List,Popup,Dialog } from 'vant';
	export default{
		components: {
			Tab,
			Tabs,
			List,
			Dialog
		},
		filters:
		{
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}
		},
		data()
		{
			return{
				title_data : [
					{ name: '待付款',status:0 },
					{ name: '待发货',status:1 },
					{ name: '已发货',status:2 },
					{ name: '已完成',status:3 },
					{ name: '已取消',status:5 },
				],
      			status      		: this.$route.query.status,
				schedule_data       : [],
				order_data          : [],
				data 				: [],
				page 				: 1,
				crow_id             : '',
				loading				: false,
      			finished			: false,
      			schedule_show 		: false,
      			shop_show           : true,
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.loading = true;
				let params = {
					status : this.status ? this.status : 0,
					limit  : 20,
					page   : this.page++
				}
				this.$http.get('/order/list',{ params : params }).then( res=> { 
					if(res.data.list.length){
						this.data = this.data.concat(res.data.list);
						this.loading = false;
						this.shop_show = false;
					}
					if(res.data.list.length < params.limit){
						this.finished = true;
					}
				})
			},
			loadOrderData(item)
			{
				this.order_data = item;
				switch(this.status)
				{
					case 1:
						this.schedule_show = true;
						if(this.order_data.order_item.length > 1)
						{
							this.shop_show = true;
						}
						else
						{
							this.shop_show = false;
							this.crow_id = this.order_data.order_item[0].crow_id;
							this.getSchedule();
						}
						break;
					case 3:
						if(this.order_data.order_item.length > 1)
						{
							this.schedule_show = true;
							this.shop_show = true;
						}
						else
						{
							if(item.is_aftersale == 0)
							{
								this.$router.push('/personal/order/after-detail?id=' + this.order_data.order_item[0].order_item_id)
							}
							else
								this.$router.push('/personal/order/exchange?id=' + this.order_data.order_item[0].order_item_id)
						}
						break;
				}
			},
			getSchedule(item)
			{	
				switch(this.status)
				{
					case 1 :
						if(item)
							this.crow_id = item.crow_id;
						this.$http.get('/goods/progress',{ params : { crow_id : this.crow_id }}).then(res => {
							this.schedule_data = res.data;
							this.shop_show = false;
						})
						break;
					case 3 :
						if(this.order_data.is_aftersale == 0)
						{
							this.$router.push('/personal/order/after-detail?id=' + item.order_item_id)
						}
						else
								this.$router.push('/personal/order/exchange?id=' + item.order_item_id)
						break;

				}
			},
			loadInitData(item)
			{
				this.page = 1;
				this.data = [];
				this.loading = false;
				this.status = item.status;
				this.loadData();
			},
			jumpDetail(items)
			{
				if(this.status != 5)
					this.$router.push('/personal/order/detail?status=' + this.status + '&order_id=' + items.order_id )
			},
		
			//确认收款
			recieveOrderFun(item)
			{
				Dialog.confirm({
				  	title: '提示',
				  	message: '确定收货吗？'
				}).then(() => {
					let params = {
						id : item.order_id
					}
					this.$http.post('/order/received',params).then(res => {
						this.page = 1;
						this.data = [];
						this.loading = false;
						this.loadData();
					})
				}).catch(() => {
				  	return;
				});
			}
		}
	}
</script>

<style lang="less">
	.order{
		.van-tabs__wrap--scrollable{
			.van-tab{
				flex : 0 0 20%;
			} 
		} 
		.van-tabs__wrap{
			position: fixed;
		}
		.van-cell{
			padding: 0;
		}
		.close{
			width:1rem;
			height: 1rem;
			top: 50%;
			right: 10%;
			transform: translate(50%,-50%);
		}
		.shop-list{
			height: 20rem;
			overflow-x: scroll;
		}
	}
</style>
